<template>
  <div class="add-form">
    <el-dialog  :title="cTitle" :visible.sync="dialogFormVisible" width="60%">
      <el-form
        :rules="rules"
        ref="article"
        :model="article"
        label-position="center"
        label-width="100px"
        style="width: 80%;
        margin-left:10px;"
        class="ql-editor"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
      <el-form-item label="文章内容" prop="articleBody" >
          <quill-editor
            v-model="article.articleBody"
            :options="editorOption"></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="article.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormHidden">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="hConfirm">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from '@/api/hmmm/articles.js'
// 导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  name: 'ArticlesAdd',
  props: {
    // 接收要修改的文章信息
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      editorOption: {
      // 对富文本编辑器的配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      },
      // 表单验证
      rules: {
        title: [
          { required: true, message: '请输入为文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    cTitle () {
      return this.article.id ? '修改文章' : '新增文章'
    }
  },
  methods: {
    // 弹层显示
    dialogFormShow () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormHidden () {
      this.dialogFormVisible = false
    },
    async doConfirm () {
      try {
        // 1、如果修改文章
        if (this.article.id) {
          const result = await update(this.article)
          console.log(result)
          this.$emit('modifyOk')
        // 1、如果新增文章
        } else {
          await add(this.article)
          this.$emit('addOk')
        }
        this.dialogFormHidden()
      } catch (err) {
        console.log(err)
      }
    },
    // 表单提交处理确认事件（添加或修改）
    hConfirm () {
      this.$refs.article.validate(result => {
      // console.log(result)
        if (result) {
          this.doConfirm()
          this.$message.success('操作成功')
        }
      })
    }
  },
  mounted: function () {},
  created () {
  }
}
</script>
<style scoped lang='less'>
  /deep/ .ql-container {
    max-width: 1000px;
    height: 250px;
    .ql-editor {
      max-width: 1000px;
    }
    }
  .el-form--label-left .el-form-item__label {
    text-align: right;
  }
  .el-form-item--medium {
    margin-bottom: 22px;
  }
  .el-dialog__footer {
    text-align: center;
  }
  .publish-container /deep/ .ql-editor{
    height: 500px;
  }
  .publish-container /deep/ .ql-toolbar.ql-snow{
    padding: 0 8px;
  }
</style>
